<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>全国天气查询小应用</title>
    <link rel="stylesheet" href="asserts/css/weather.css"/>
    <link rel="icon" href="asserts/ico/favicon.ico"/>
    <link rel="stylesheet" href="asserts/layui/css/layui.css"/>
    <script type="text/javascript" src="asserts/layui/layui.js"></script>
    <link href="asserts/layui/css/layui.css" rel="stylesheet"/>

    <script src="asserts/layui/layui.js" type="text/javascript"></script>
    <script src="asserts/js/jquery2.min.js" type="text/javascript"></script>

    <style th:inline="text">
        body {
            background: url("asserts/img/bg.jpg");
        }
    </style>
</head>
<body>


<div th:fragment="topbar">
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item">
            <h2 class="layui-nav-item-logo" style="color: gold;font-family: 华文隶书;font-size: 40px" href="">天气系统</h2>
        </li>
        <li class="layui-nav-item layui-this">
            <a href="" style="font-size: 20px;font-family: 华文行楷">更多资讯</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd>
                    <a href="">文章</a>
                </dd>
                <dd>
                    <a href="">condfew</a>
                </dd>
                <dd>
                    <a href="">condfew</a>
                </dd>
                <dd>
                    <a href="">condfew</a>
                </dd>
                <dd>
                    <a href="">condfew</a>
                </dd>
            </dl>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{toNews}" style="font-size: 20px;font-family: 华文行楷">推荐主页</a>
        </li>


        <li class="layui-nav-item layui-nav-item-a">
            <a href="javascript:;" style="font-size: 20px;font-family: 华文行楷">管理员空间</a>
        </li>


    </ul>
</div>
<div class="layui-main">
    <form class="layui-form" action="/tomap" th:action="@{tomap}" method="get" style="margin:50px auto">
        <div class="layui-form-item">
            <label class="layui-form-label">请选择地区</label>
            <div class="layui-inline">
                <select name="province" id="province" lay-verify="required" lay-search lay-filter="province">
                    <option value="">省份</option>
                </select>
            </div>
            <div class="layui-inline">
                <select name="city" id="city" lay-verify="required" lay-search lay-filter="city">
                    <option value="">地级市</option>
                </select>
            </div>


        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn ">提交</button>
            </div>
        </div>
    </form>
</div>

<section>
    <div id="today_container">
        <div>
            <img src="asserts/img/weather_icon/1.png" alt="今日天气"/>
        </div>
        <div>

            <div class="main_info">
                <span class="info" th:text="${cityName.city}"></span>|
                <span class="info">201X-XX-XX</span>|
                <span class="info">星期X</span>|
                <span class="info">---</span></div>
            <div class="more_info">今日温度：<span class="info">-----</span>风力：<span class="info">-----</span>风向：<span
                    class="info">-----</span>PM2.5：<span class="info">--</span></div>

        </div>
    </div>
    <div id="future_container">
        <div class="future_box">
            <img src="/asserts/img/weather_icon/1.png" alt="天气"/>
            <span class="future_info">201X-XX-XX</span>
            <span class="future_info">星期X</span>
            <span class="future_info">--</span><span class="future_info">12-16℃</span>
        </div>
        <div class="future_box">
            <img src="asserts/img/weather_icon/3.png" alt="天气"/>
            <span class="future_info">201X-XX-XX</span>
            <span class="future_info">星期X</span>
            <span class="future_info">--</span><span class="future_info">12-16℃</span>
        </div>
        <div class="future_box">
            <img src="asserts/img/weather_icon/2.png" alt="天气"/>
            <span class="future_info">201X-XX-XX</span>
            <span class="future_info">星期X</span>
            <span class="future_info">--</span><span class="future_info">12-16℃</span>
        </div>
        <div class="future_box">
            <img src="asserts/img/weather_icon/4.png" alt="天气"/>
            <span class="future_info">201X-XX-XX</span>
            <span class="future_info">星期X</span>
            <span class="future_info">--</span><span class="future_info">12-16℃</span>
        </div>
        <div class="future_box">
            <img src="asserts/img/weather_icon/5.png" alt="天气"/>
            <span class="future_info">201X-XX-XX</span>
            <span class="future_info">星期X</span>
            <span class="future_info">-</span><span class="future_info">12-16℃</span>
        </div>
    </div>
</section>

<script>
    layui.use('element', function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
</script>
<script src="asserts/js/index.js"></script>
<script src="asserts/js/area.js" type="text/javascript"></script>
<script src="asserts/js/select.js" type="text/javascript"></script>
<script type="text/javascript">
    function jg() {
        alert($("#province").val() + $("#city").val() + $("#district").val());
    }
</script>

</body>
</html>